<template>
	<view class="main">
		<nav-bar :border-bottom="false" :is-fixed="true" class="nav-bar" title="我的朋友" />
		<view class="container">
			<view class="box-top">
				<view class="info flex-aro">
					<view class="item" @click="changeUserType(4)">
						<text class="num">{{detail.total_num}}</text>
						<text class="label" :class="{'active': current === 4}">总人数</text>
					</view>
					<view class="item" @click="changeUserType(5)">
						<text class="num">{{detail.live_num}}</text>
						<text class="label" :class="{'active': current === 5}">直推人数</text>
					</view>
					<view class="item" @click="changeUserType(7)">
						<text class="num">{{detail.device_user_num}}</text>
						<text class="label" :class="{'active': current === 7}">设备用户</text>
					</view>
				</view>
				<view class="statistics">
					<view :class="{'item': true, 'active': current === 1}" @click="changeUserType(1)">
						新用户({{detail.new_user_num}})</view>
					<view :class="{'item': true, 'active': current === 2}" @click="changeUserType(2)">
						下单用户({{detail.order_user_num}})</view>
					<view :class="{'item': true, 'active': current === 3}" @click="showSelectLevel">
						<text>{{vipName}}</text>
						<u-icon name="arrow-down-fill" size="22" color="#a3a3a3"></u-icon>
					</view>
				</view>
			</view>
		</view>
		<view class="list">
			<block v-if="list.length > 0">
				<view class="item" v-for="item in list" :key="item.id">
					<view class="left">
						<view class="avatar">
							<image :src="item.headavatar" mode="aspectFill"></image>
						</view>
						<view class="info">
							<view class="name">{{item.name}}</view>
							<view class="time">{{item.create_time}}</view>
						</view>
					</view>
					<view class="rank">{{item.vip_level_text}}</view>
				</view>
			</block>
			<text class="hint" v-else>没有数据~</text>
		</view>
		<u-select v-model="show" :list="levels" @confirm="setLevel"></u-select>
	</view>
</template>

<script>
	import {
		frendInfoApi,
		frendListApi
	} from '@/api/my.js'
	import './index.scss'
	let timer = null
	export default {
		data() {
			return {
				background: {
					backgroundColor: 'rgba(203,113,43, 0)'
				},
				current: 1,
				list: [],
				detail: {},
				vip_level: 1,
				filter: {
					page: 1,
					size: 10
				},
				finished: false,
				show: false,
				levels: [{
						value: 0,
						label: '注册会员'
					},
					
					{
						value: 1,
						label: '分销商'
					},
					{
						value: 2,
						label: '代理商'
					},
				]
			}
		},
		onLoad() {
			this.getData()
		},
		filters: {
			formatVipLevel(val) {
				let str = ""
				//0：注册会员 1：VIP会员 2： 合伙人
				switch (val) {
					case 0:
						str = "注册会员";
						break;
					case 1:
						str = 'SVIP会员'
						break;
					case 2:
						str = "合伙人"
				}
				return str
			}
		},
		computed: {
			vipName() {
				if (this.current === 3) {
					return this.levels.find(item => item.value === this.vip_level).label
				} else {
					return '会员等级'
				}
			}
		},
		methods: {
			async getData() {
				let {
					data
				} = await frendInfoApi()
				console.log(data);
				this.detail = data
				console.log(this.detail);
				this.getList()
				// this.list = data.data
			},
			getOffsetTop() {
				uni.getSystemInfo({
					success: (res) => {
						// this.top = res.statusBarHeight + uni.upx2px(50)
					}
				})
			},
			async getList() {
				let query = {
					type: this.current,
					...this.filter
				}
				if (query.type === 3) {
					query.vip_level = this.vip_level
				}
				let {
					data
				} = await frendListApi(query)
				this.finished = data.length < this.filter.size
				if (this.filter.page === 1) {
					this.list = data
				} else {
					this.list = this.list.concat(data)
				}
			},
			showSelectLevel() {
				this.show = true
			},
			setLevel(data) {
				let tmpData = data[0]
				this.vip_level = tmpData.value
				this.changeUserType(3)
			},
			changeUserType(type) {
				this.current = type
				this.resetParams()
				this.getList()
			},
			resetParams() {
				this.filter.page = 1
				this.finished = false
				this.list = []
			}
		},
		onPageScroll({
			scrollTop
		}) {
			clearTimeout(timer)
			timer = setTimeout(() => {
				if (scrollTop > 100) {
					this.background.backgroundColor = "rgba(203,113,43, 1)"
				} else {
					this.background.backgroundColor = `rgba(203,113,43, ${scrollTop / 100})`
				}
			}, 10)
		},
		onReachBottom() {
			if (this.finished) return this.$utils.toast('没有更多了')
			this.filter.page++;
			this.getList()
		}
	}
</script>
